<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>流程工艺</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
		<link href="css/eqChart.css" rel="stylesheet" />
		<style type="text/css">
			.fa_text {
				font-size: 12px;
				font-weight: bold;
			}

			.valBox {
				fill: black;
				stroke: #aea6a8;
				stroke-width: 2;
			}

			.valText {
				fill: #00fa00;
				font-size: 14px;
			}

			.valDan {
				fill: white;
				font-size: 12px;
			}

			.info_text {
				font-size: 14px;
				fill: #666;
				font-weight: bold;
			}

			.eq_size {
				font-size: 14px;
			}

			.small_size {
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="android">
			<header class="mui-bar mui-bar-nav gradient_normal">
				<div class="mui-action-back mui-pull-left mui-icon mui-icon-arrowleft"></div>
				<h1 class="mui-title"><span class="equipment_select">收集筛分撬</span><span class="mui-icon mui-icon-arrowdown"></span></h1>
				<div class="mui-pull-right">
					<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn " :class="valData.DB700!='True'?'mui-btn-success':'mui-btn-danger'" v-html="valData.DB700!='True'?'启动':'关闭'"></button>
				</div>
			</header>
			<div style="position: fixed;top: 54px;left: 0;bottom: 0;right: 0;">
				<div class="svg-rigthBtn">
					<div class="btn">
						<button class="btnShow equipment_show">
							<i class="mui-icon mui-icon-arrowleft"></i>
						</button>
						<button class="btnShow equipment_data">
							<img src="img/svgBtn01.png">
						</button>
						<button class="btnShow equipment_wraing">
							<img src="img/svgBtn02.png">
						</button>
						<button class="btnShow returnBtn">
							<img src="img/svgBtn03.png">
						</button>
					</div>
					<div class="eqTable mui-content">
						<div class="dataBox mui-row">
							<div class="mui-col-sm-6 clearfix" v-if="item.Group==3" v-for="item in eqData">
								<span class="mui-pull-left">{{item.VarName}}：</span>
								<strong class="mui-pull-right">{{item.DataType=='Bit'?(item.Val=="true"?"开":"关"):item.Val}}</strong>
							</div>
						</div>
					</div>
				</div>
				<svg id="svg">
					<g id="scale" transform="translate(-20,0) scale(0.7)">
						<image class="drawing1_bg" x="0" y="0" width="1090" height='500' xlink:href="drawing/zhen.png"></image>
						<!--1#阀-->
						<image class="rotate" x="0" y="0" width="30" height='30' :xlink:href="valData.DB4640=='true'?'drawing/famen1.png':'drawing/famen2.png'"
						 transform="translate(396 160) rotate(-90)"></image>
						<text>
							<tspan class="fa_text" x="361" y="140">1#阀</tspan>
						</text>
						<!--2#阀-->
						<image class="rotate" x="0" y="0" width="30" height='30' :xlink:href="valData.DB4642=='true'?'drawing/famen1.png':'drawing/famen2.png'"
						 transform="translate(556 160) rotate(-90)"></image>
						<text>
							<tspan class="fa_text" x="521" y="140">2#阀</tspan>
						</text>
						<!--3#阀-->
						<image class="rotate" x="0" y="0" width="30" height='30' :xlink:href="valData.DB4644=='true'?'drawing/famen1.png':'drawing/famen2.png'"
						 transform="translate(683 160) rotate(-90)"></image>
						<text>
							<tspan class="fa_text" x="648" y="140">3#阀</tspan>
						</text>
						<!--4#阀-->
						<image class="rotate" x="0" y="0" width="30" height='30' :xlink:href="valData.DB4646=='true'?'drawing/famen1.png':'drawing/famen2.png'"
						 transform="translate(512 360) rotate(-90)"></image>
						<text>
							<tspan class="fa_text" x="479" y="340">4#阀</tspan>
						</text>
						<!--补水阀2-->
						<image class="rotate" x="750" y="31" width="30" height='30' :xlink:href="valData.DB602=='true'?'drawing/famen1.png':'drawing/famen2.png'"></image>
						<text>
							<tspan class="fa_text" x="750" y="25">补水阀2</tspan>
						</text>
						<!--热水温度-->
						<text>
							<tspan class="fa_text" x="169" y="48">TT</tspan>
						</text>
						<svg x="148" y="55" width="57" height="21">
							<text class="fa_text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">{{valData.DB4_16}}</text>
						</svg>
						<text>
							<tspan class="fa_text" x="145" y="120">热水温度（℃）</tspan>
						</text>
						<!--热水压力-->
						<text>
							<tspan class="fa_text" x="252" y="48">TI</tspan>
						</text>
						<svg x="228" y="55" width="57" height="21">
							<text class="fa_text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">{{valData.DB4_20}}</text>
						</svg>
						<text>
							<tspan class="fa_text" x="210" y="25">热水压力（MPA）</tspan>
						</text>
						<!--热水流量-->
						<svg x="308" y="51" width="57" height="21">
							<text class="fa_text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">{{valData.DB4_32}}</text>
						</svg>
						<text>
							<tspan class="fa_text" x="300" y="120">热水流量（m³/H）</tspan>
						</text>
						<!--蒸汽温度-->
						<text>
							<tspan class="fa_text" x="169" y="397">TT</tspan>
						</text>
						<svg x="148" y="406" width="57" height="21">
							<text class="fa_text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">{{valData.DB4_24}}</text>
						</svg>
						<text>
							<tspan class="fa_text" x="145" y="467">蒸汽温度（℃）</tspan>
						</text>
						<!--蒸汽压力-->
						<text>
							<tspan class="fa_text" x="252" y="397">TI</tspan>
						</text>
						<svg x="228" y="406" width="57" height="21">
							<text class="fa_text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">{{valData.DB4_28}}</text>
						</svg>
						<text>
							<tspan class="fa_text" x="210" y="374">蒸汽压力（MPA）</tspan>
						</text>
						<!--蒸汽流量-->
						<svg x="308" y="400" width="57" height="21">
							<text class="fa_text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">{{valData.DB4_36}}</text>
						</svg>
						<text>
							<tspan class="fa_text" x="300" y="467">蒸汽流量（m³/H）</tspan>
						</text>
						<!--1#储液罐-->
						<text>
							<tspan class="fa_text" x="840" y="100">TT</tspan>
						</text>
						<svg x="819" y="108" width="57" height="21">
							<text class="fa_text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">{{valData.DB4_0}}</text>
						</svg>
						<text>
							<tspan class="fa_text" x="885" y="110">度</tspan>
						</text>

						<g transform="translate(748 190)">
							<rect class="valBox" width="80" height="30" x="35" y="20"></rect>
							<text class="valText" x="42" y="40">{{valData.DB4_4}}</text>
							<text class="valDan" x="95" y="41">m</text>
						</g>
						<image class="" x="740" y="137" width="80" height='80' :xlink:href="valData.DB4680=='true'?'drawing/jiaoduan.gif':'drawing/jiaoduan.png'"></image>
						<text>
							<tspan class="fa_text" x="715" y="170">1#搅拌机</tspan>
						</text>
						<image class="" x="770" y="137" width="80" height='80' :xlink:href="valData.DB4681=='true'?'drawing/jiaoduan.gif':'drawing/jiaoduan.png'"></image>
						<text>
							<tspan class="fa_text" x="800" y="147">2#搅拌机</tspan>
						</text>

						<text>
							<tspan class="eq_size" x="790" y="265">1#储液罐</tspan>
						</text>

						<svg x="789" y="311" width="57" height="21">
							<text class="fa_text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">{{valData.DB4_52}}</text>
						</svg>
						<text>
							<tspan class="fa_text" x="780" y="375">1#输出流量（m³/H）</tspan>
						</text>
						<!--2#储液罐-->
						<text>
							<tspan class="fa_text" x="1003" y="100">TT</tspan>
						</text>
						<svg x="982" y="108" width="57" height="21">
							<text class="fa_text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">{{valData.DB4_8}}</text>
						</svg>
						<text>
							<tspan class="fa_text" x="1049" y="110">度</tspan>
						</text>

						<g transform="translate(910 190)">
							<rect class="valBox" width="80" height="30" x="35" y="20"></rect>
							<text class="valText" x="42" y="40">{{valData.DB4_12}}</text>
							<text class="valDan" x="95" y="41">m</text>
						</g>
						<image class="" x="904" y="137" width="80" height='80' :xlink:href="valData.DB4684=='true'?'drawing/jiaoduan.gif':'drawing/jiaoduan.png'"></image>
						<text>
							<tspan class="fa_text" x="880" y="170">1#搅拌机</tspan>
						</text>
						<image class="" x="934" y="137" width="80" height='80' :xlink:href="valData.DB4685=='true'?'drawing/jiaoduan.gif':'drawing/jiaoduan.png'"></image>
						<text>
							<tspan class="fa_text" x="964" y="147">2#搅拌机</tspan>
						</text>

						<text>
							<tspan class="eq_size" x="954" y="265">2#储液罐</tspan>
						</text>

						<svg x="843" y="389" width="57" height="21">
							<text class="fa_text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">{{valData.DB4_56}}</text>
						</svg>
						<text>
							<tspan class="fa_text" x="836" y="452">2#输出流量（m³/H）</tspan>
						</text>
						<!--进料搅拌机-->
						<image class="" x="150" y="194" width="80" height='80' :xlink:href="valData.DB4690=='true'?'drawing/jiaoduan.gif':'drawing/jiaoduan.png'"></image>
						<text>
							<tspan class="fa_text" x="205" y="220">进料搅拌机</tspan>
						</text>
						<text>
							<tspan class="eq_size" x="165" y="305">组合进料斗</tspan>
						</text>
						<!--进料输送机-->
						<image class="" x="326" y="230" width="20" height='20' :xlink:href="valData.DB4687=='true'?'drawing/dian_luoxuan1.png':'drawing/dian_luoxuan2.png'"></image>
						<text>
							<tspan class="fa_text" x="330" y="220">进料输送机</tspan>
						</text>
						<text>
							<tspan class="eq_size" x="330" y="285">螺旋输送机</tspan>
						</text>
						<!--滚筒电机-->
						<image class="" x="526" y="240" width="30" height='20' :xlink:href="valData.DB4693=='true'?'drawing/dian_gundong1.png':'drawing/dian_gundong2.png'"></image>
						<text>
							<tspan class="fa_text" x="520" y="275">滚筒电机</tspan>
						</text>
						<text>
							<tspan class="eq_size" x="530" y="303">滚筒筛</tspan>
						</text>
						<!--震动电机-->
						<image class="" x="640" y="240" width="30" height='20' :xlink:href="valData.DB4691=='true'?'drawing/dianji1_1.png':'drawing/dianji1_2.png'"></image>
						<image class="" x="676" y="240" width="30" height='20' :xlink:href="valData.DB4692=='true'?'drawing/dianji1_1.png':'drawing/dianji1_2.png'"></image>
						<text>
							<tspan class="fa_text" x="638" y="275">振动电机1/2</tspan>
						</text>
						<text>
							<tspan class="eq_size" x="650" y="303">振动筛</tspan>
						</text>
						<!--1#离心泵-->
						<image class="" x="950" y="345" width="30" height='20' :xlink:href="valData.DB4682=='true'?'drawing/beng_right1.png':'drawing/beng_right2.png'"></image>
						<text>
							<tspan class="fa_text" x="950" y="380">1#离心泵</tspan>
						</text>
						<!--2#离心泵-->
						<image class="" x="1020" y="422" width="30" height='20' :xlink:href="valData.DB4686=='true'?'drawing/beng_right1.png':'drawing/beng_right2.png'"></image>
						<text>
							<tspan class="fa_text" x="1020" y="455">2#离心泵</tspan>
						</text>
						<!--热水-->
						<text>
							<tspan class="info_text" x="89" y="90">热水</tspan>
						</text>
						<!--污泥池-->
						<text>
							<tspan class="info_text" x="89" y="250">污泥池</tspan>
						</text>
						<!--蒸汽-->
						<text>
							<tspan class="info_text" x="89" y="438">蒸汽</tspan>
						</text>
						<!--来自药剂罐和清水罐-->
						<text>
							<tspan class="info_text" x="910" y="43">来自药剂罐和清水罐</tspan>
						</text>
						<!--去热洗撬-->
						<text>
							<tspan class="info_text" x="573" y="425">去热洗撬</tspan>
						</text>
					</g>
				</svg>
			</div>
		</div>
		<script src="js/mui.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/mui.picker.js" type="text/javascript"></script>
		<script src="js/mui.poppicker.js" type="text/javascript"></script>
		<script src="js/d3.min.js"></script>
		<script src="js/vue.min.js"></script>

		<script>
			var app = new Vue({
				el: '#app',
				data: {
					url: "http://112.54.80.235:8038",
					eqData: {},
					valData: {}
				},
				created: function() {
					
				},
				mounted: function() {
					var _this = this;
					mui.init({
						keyEventBind: {
							backbutton: true //关闭back按键监听
						}
					});
					mui.plusReady(function() {
						//横屏
						plus.screen.lockOrientation("landscape-primary");
						//自定义
						window.addEventListener('screen', function(event) {
							plus.screen.lockOrientation("landscape-primary");
						});
						//监听返回
						var old_back = mui.back;
						mui.back = function() {
							var list = plus.webview.getWebviewById('index.html');
							//触发列表界面的自定义事件（refresh）,从而进行数据刷新
							mui.fire(list, 'screen');
							plus.webview.currentWebview().hide()
							// var ind=localStorage.getItem("backInfo");
							// if(ind=="true"){
							// 	plus.screen.unlockOrientation();
							// 	plus.screen.lockOrientation("portrait-primary")
							// 	plus.webview.currentWebview().hide()
							// }else{
							// 	old_back();
							// }
							// plus.screen.unlockOrientation();
							// plus.screen.lockOrientation("portrait-primary")
						}

						//安卓返回按钮监听--竖屏
						plus.key.addEventListener("backbutton", function() {
							plus.screen.unlockOrientation();
							plus.screen.lockOrientation("portrait-primary")
						})
						//等待框开启
						plus.nativeUI.showWaiting();
						//顶部空出
						if(!mui.os.ios){
							$("#app").addClass("android")
						}else{
							$("#app").removeClass("android")
						}
						//下拉
						var picker = new mui.PopPicker();
						var eqinfo = JSON.parse(localStorage.getItem("eqInfo"));
						var setdata = eqinfo.map(function(val, key) {
							return {
								value: val.Id,
								text: val.DeviceName
							}
						})
						setdata.unshift({
							value: "0",
							text: "全部"
						})
						picker.setData(setdata);
						picker.pickers[0].setSelectedIndex(4);
						$(".equipment_select").text(setdata[4].text);
						$(document).on("tap", ".equipment_select", function() {
							picker.show(function(SelectedItem) {
								var href = "";
								var val = String(SelectedItem[0].value);
								switch (val) {
									case "全部":
										//全部
										href = "eqChart.html";
										break;
									case "化学热洗撬":
										//热洗撬
										href = "eqChart2.html";
										break;
									case "缓冲收油撬":
										//气浮撬
										href = "eqChart1.html";
										break;
									case "供水加药撬":
										//加药供水撬
										href = "eqChart3.html";
										break;
									case "收集筛分撬":
										//振动筛分撬
										href = "eqChart4.html";
										break;
									case "固液分离撬":
										//压滤机
										href = "eqChart5.html";
										break;
								}

								mui.openWindow({
									url: href,
									id: href,
									waiting: {
										autoShow: true, //自动显示等待框，默认为true
										title: '正在加载...', //等待对话框上显示的提示内容
									}
								});
								plus.webview.currentWebview().hide()
							})
						});
						//点击显示数据
						$(document).on('tap', '.equipment_show', function() {
							$('.svg-rigthBtn').animate({
								right: '0'
							})
							$(this).removeClass('equipment_show').addClass('equipment_hide')
							$('.mui-icon-arrowleft', this).removeClass('mui-icon-arrowleft').addClass('mui-icon-arrowright')
						})
						$(document).on('tap', '.equipment_hide', function() {
							$('.svg-rigthBtn').animate({
								right: '-300px'
							})
							$(this).removeClass('equipment_hide').addClass('equipment_show')
							$('.mui-icon-arrowright', this).removeClass('mui-icon-arrowright').addClass('mui-icon-arrowleft')
						})
						//历史数据
						$(document).on("tap", ".equipment_data", function() {
							var id = 1;
							mui.openWindow({
								url: "dataNow.html",
								id: "dataNow.html",
								extras: {
									info: eqinfo[4],
									href: "eqChart4.html"
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						});
						//报警信息
						$(document).on("tap", ".equipment_wraing", function() {
							console.log(eqinfo);
							mui.openWindow({
								url: "alarmMessage.html",
								id: "alarmMessage.html",
								extras: {
									info: eqinfo[4],
									href: "eqChart4.html"
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						});
						//启动
						mui(document.body).on('tap', '.mui-btn-success', function(e) {
							console.log(eqno);
							mui('.mui-btn-success').button('loading');
							$.ajax({
								type:"post",
								data: {},
								url: _this.url + "/actionapi/Users/OpenOrClose?flag=true&deviceNo="+eqno,
								success: function(data) {
									mui('.mui-btn-success').button('reset');
								},
								error: function(err) {
									console.log(JSON.stringify(err));
									mui('.mui-btn-success').button('reset');
									mui.toast("OpenOrClose接口有误！");
								}
							})
						});
						//关闭
						mui(document.body).on('tap', '.mui-btn-danger', function(e) {
							console.log(eqno);
							mui('.mui-btn-danger').button('loading');
							$.ajax({
								type:"post",
								data: {},
								url: _this.url + "/actionapi/Users/OpenOrClose?flag=false&deviceNo="+eqno,
								success: function(data) {
									mui('.mui-btn-danger').button('reset');
								},
								error: function() {
									mui('.mui-btn-danger').button('reset');
									mui.toast("OpenOrClose接口有误！");
								}
							})
						});
						//svg放大缩小
						var width = window.innerWidth;
						var height = window.innerHeight;
						var svg = d3.select("svg"),
							inner = svg.select("g");
						svg.attr("width", '100%')
							.attr("height", "100%");
						// Set up zoom support
						var zoom = d3.zoom()
							.on("zoom", function() {
								inner.attr("transform", d3.event.transform);
							});
						svg.call(zoom);
						$(".resetText").click(function() {
							svg.call(zoom.transform, d3.zoomIdentity);
							inner.attr("transform", 'translate(-20,0) scale(0.7)');
						});
						$('.returnBtn').click(function() {
							svg.call(zoom.transform, d3.zoomIdentity);
							inner.attr("transform", 'translate(-20,0) scale(0.7)');
						});
						//监听显示隐藏
						var myself = plus.webview.getWebviewById("eqChart4.html");
						myself.addEventListener("hide", function() {
							console.log("hide");
							ws.close();
						})
						myself.addEventListener("show", function() {
							console.log("show");
							var eqno = localStorage.getItem("eqno")
							$.ajax({
								data: {
									deviceNo: eqno
								},
								url: _this.url + "/actionapi/Users/GetData",
								success: function(data) {
									console.log("dddd--" + eqno);
									createWebSocket()
								},
								error: function() {
									console.log("error");
								}
							});
						});
						var eqno = localStorage.getItem("eqno")
						$.ajax({
							data: {
								deviceNo: eqno
							},
							url: _this.url + "/actionapi/Users/GetData",
							success: function(data) {
								console.log("dddd--" + eqno);
								createWebSocket()
							},
							error: function() {
								console.log("error");
							}
						});
						//检查浏览器是否支持WebSocketk
						var lockReconnect = false; //避免重复连接
						var wsUrl = "ws://192.168.1.151:8091"; // websocket链接
						var ws;
						if (!window.WebSocket) {
							console.log('您的浏览器不支持WebSocket，请选择其他的浏览器再尝试连接服务器');
						} else {
							function createWebSocket() {
								try {
									ws = new WebSocket(wsUrl);
									websocketInit();
								} catch (e) {
									console.log('catch');
									websocketReconnect(wsUrl);
								}
							}

							createWebSocket(); // 创建websocket

							function websocketInit() {
								// 建立 web socket 连接成功触发事件
								ws.onopen = function(evt) {
									onOpen(evt);
								};
								// 断开 web socket 连接成功触发事件
								ws.onclose = function(evt) {
									onClose(evt);
								};
								// 接收服务端数据时触发事件
								ws.onmessage = function(evt) {
									onMessage(evt);
								};
								// 通信发生错误时触发
								ws.onerror = function(evt) {
									onError(evt);
								};
							};

							function onOpen(evt) {
								console.log("建立链接");
								var sendData = {
									test: 'test'
								}; // 正常的请求数据
								sendData = JSON.stringify(sendData);
								ws.send(sendData);
								//心跳检测重置
								heartCheck.start();
							}

							function onClose(evt) {
								console.log("连接已关闭...");
							}

							function onMessage(evt) {
								var data_json1 = JSON.parse(evt.data)
								if (data_json1) {
									//关闭等待框
									plus.nativeUI.closeWaiting();
								}
								_this.eqData = data_json1;
								// console.log(_this.eqData)
								obj = new Object();
								var valData = data_json1.map(function(item, key) {
									if (item.DataType == "FLOAT") {
										var str = item.RegisterName.replace(/[\ |\~|\`|\!|\@@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g,"_");
									} else {
										var str = item.RegisterName.replace(/[\ |\~|\`|\!|\@@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g,"");
									}
									obj[str] = item.Val;
									return obj
								})
								_this.valData = obj;
								
								//拿到任何消息都说明当前连接是正常的
								heartCheck.start();
							}

							function websocketReconnect(url) {
								if (lockReconnect) { // 是否已经执行重连
									return;
								};
								lockReconnect = true;
								//没连接上会一直重连，设置延迟避免请求过多
								tt && clearTimeout(tt);
								var tt = setTimeout(function() {
									createWebSocket(url);
									lockReconnect = false;
								}, 5000);
							}

							//心跳检测
							var heartCheck = {
								timeout: 30000,
								num: 3, //3次心跳均未响应重连
								timeoutObj: null,
								serverTimeoutObj: null,
								start: function() {
									var self = this;
									var _num = this.num;
									this.timeoutObj && clearTimeout(this.timeoutObj);
									this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
									this.timeoutObj = setTimeout(function() {
										//发送测试信息，后端收到后，返回一个消息，
										ws.send("1");
										_num--;
										//计算答复的超时次数
										if (_num === 0) {
											ws.colse();
										}
									}, this.timeout)
								}
							}

							function onError(evt) {
								//关闭等待框
								plus.nativeUI.closeWaiting();
								mui.toast('通信错误：' + evt.data);
							}
						}
					});
				}
			})
		</script>
	</body>

</html>
